<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 
		  获取标签属性:
		  1.标签固有属性
		    对象.属性名
		  2.自定义属性
		    对象.getAttribute("属性名") 获取
			对象.getAttribute("属性名","属性值") 设置
			对象.removeAttribute("属性名") 删除
		  h5自定义属性
		  以data-为前缀设置
		-->
	</head>
	<body>
		<img src="img/sj.jpg" width="200px" height="200px" bwf="123" data-index="1" data-color-name="blue" />
		<hr />
		<button id="get">获取属性</button>
		<button id="set">设置属性</button>
		<button id="del">删除属性</button>
		<button id="h5">h5自定义属性</button>
		<script type="text/javascript">
			//获取id为get的button节点对象
			var btnNodeGet = document.querySelector("#get");
			//为button节点对象绑定鼠标单击事件
			btnNodeGet.onclick = function() {
				//获取标签名为img的img节点对象
				var imgNode = document.querySelector("img");
				//获取img节点对象的属性(自定义)的值
				var bwf = imgNode.getAttribute("bwf"); //查
				console.log(bwf);
			}

			var btnNodeSet = document.querySelector("#set");
			btnNodeSet.onclick = function() {
				var imgNode = document.querySelector("img");
				//为img节点对象添加属性(自定义)
				imgNode.setAttribute("test", "zhangsan"); //增
				imgNode.setAttribute("bwf", "789"); //改
			}

			var btnNodeDel = document.querySelector("#del");
			btnNodeDel.onclick = function() {
				var imgNode = document.querySelector("img");
				//为img节点对象删除属性(自定义)
				imgNode.removeAttribute("test")
			}

			var btnNodeH = document.querySelector("#\h5");
			btnNodeH.onclick = function() {
				var imgNode = document.querySelector("img");
				//dataset是一个存储了所有以data开头的自定义属性的数组
				console.log(imgNode.dataset.index);
				//如果自定义属性由多个单词组成，获取时使用驼峰命名法
				console.log(imgNode.dataset.colorName);
			}
		</script>
	</body>
</html>
